<template>
  <div class="home">
    <header class="header">
      <Clock class="clock-wrap" />
    </header>
    <main class="main">
      <div class="main-left side">
        <div class="top">
          <CardTitle value="指标" />
          <LeftTop />
        </div>
        <div class="middle">
          <CardTitle value="公告" />
          <LeftMiddle />
        </div>
        <div class="bottom">
          <CardTitle value="分钟级运行柱状图" />
          <!-- <LeftBottom /> -->
          <RunningBar />
        </div>
      </div>
      <div class="center">
        <div class="center-top">
          <div class="center-top-left">
            <div class="center-top-left--top">
              <CardTitle value="整体收益统计" />
              <LeftOne />
            </div>
            <div class="center-top-left--bottom">
              <CardTitle value="整体任务统计" />
              <LeftTwo />
            </div>
          </div>
          <div class="center-top-center">
            <CardTitle />
            <FundCustody class="circlepie" />
          </div>
          <div class="center-top-right">
            <div class="center-top-right--top">
              <CardTitle value="整体Agent统计" />
              <Statistical :censusdata="censusdata" />
            </div>
            <div class="center-top-right--bottom">
              <CardTitle value="Server信息" />
              <Message :machinedata="machinedata" />
            </div>
          </div>
        </div>
        <div class="center-bottom ">
          <CardTitle value="流程" />
          <Process :producuredata="producuredata" />
        </div>
      </div>
      <div class="main-right side">
        <div class="top">
          <CardTitle value="自动化流程状态" />
          <State :statedata="statedata" :definitiondata="definitiondata" />
        </div>
        <div class="bottom">
          <CardTitle value="业务趋势折线图" />
          <!-- <BrokenLine :linesdata="linesdata" /> -->
          <!-- <Line1 :value="linesdata" /> -->
          <BussinessArea />
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import Clock from "../components/Clock";
import CardTitle from "../components/CardTitle";
import Statistical from "../components/Statistical";
import Message from "../components/Message";
// import BrokenLine from "../components/BrokenLine";
import State from "../components/State";
import Process from "../components/Process";
import FundCustody from "../components/FundCustody";
// import LeftBottom from "../components/LeftBottom";
import LeftTop from "../components/LeftTop";
import LeftMiddle from "../components/LeftMiddle";
import LeftOne from "../components/LeftOne";
import LeftTwo from "../components/LeftTwo";
// import Line1 from "./Line1";
import RunningBar from "../components/RunningBar";
import BussinessArea from "../components/BussinessArea";

import {
  getStatistical,
  getMachine,
  getProducure,
  getState,
  getDefinition,
  getLinesdata,
} from "@/assets/api/api.js";
export default {
  data() {
    return {
      censusdata: [],
      machinedata: [],
      producuredata: [],
      statedata: [],
      definitiondata: [],
      linesdata: {},
      timer: null,
    };
  },
  components: {
    CardTitle,
    Statistical,
    Message,
    // BrokenLine,
    State,
    Process,
    FundCustody,
    LeftTop,
    LeftMiddle,
    // LeftBottom,
    LeftOne,
    LeftTwo,
    // Line1,
    RunningBar,
    BussinessArea,
    Clock,
  },
  props: {
    msg: String,
  },
  created() {
    this.timer = setInterval(() => {
      this.fetchData();
    }, this.schedule);
    //  this.fetchData();
  },
  mounted() {
    this.fetchData();
  },
  destroyed() {
    clearInterval(this.timer);
  },
  methods: {
    fetchData() {
      getStatistical().then((res) => {
        this.censusdata = res.data.result;
        // console.log(this.censusdata);
      });
      getMachine().then((res) => {
        this.machinedata = res.data.result;
      });
      getProducure().then((res) => {
        this.producuredata = res.data.result;
      });
      getState().then((res) => {
        this.statedata = res.data.result;
      });
      getDefinition().then((res) => {
        this.definitiondata = res.data.result;
        // console.log(this.definitiondata);
      });
      getLinesdata().then((res) => {
        // console.log(res)
        this.linesdata = res.data.result;
        // console.log(this.linesdata);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  height: 1620px;
  width: 4800px;
  background: url(../assets/bg.jpg);
}
.header {
  height: 160px;
  position: relative;
  .clock-wrap {
    position: absolute;
    right: 80px;
    top: 40px;
  }
}
.main {
  padding-left: 75px;
  display: flex;
  .side {
    width: 892px;
  }
  .center {
    width: 2904px;
  }
}
.main-left {
  padding-top: 5px;
  .top {
    height: 575px;
  }
  .middle {
    height: 355px;
  }
  .bottom {
    height: 514px;
  }
}
.center {
  padding-top: 5px;
  .center-top {
    height: 930px;
    display: flex;
    .center-top-left {
      width: 725px;
      .center-top-left--top {
        height: 384px;
      }
      .center-top-left--bottom {
        height: 534px;
      }
    }
    .center-top-center {
      width: 1402px;
      // .circlepie {
      //   width: 1000px;
      //   height: 400px;
      // }
    }
    .center-top-right {
      width: 765px;
      .center-top-right--top {
        height: 535px;
      }
      .center-top-right--bottom {
        height: 396px;
      }
    }
  }
  .center-bottom {
    height: 519px;
  }
}
.main-right {
  padding-top: 5px;
  .top {
    height: 932px;
  }
  .bottom {
    height: 505px;
  }
}
</style>
